import React, { useState, useEffect, useRef } from 'react'
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
import WGradientColorBox from '../components/WGradientColorBox';
import Form from 'react-bootstrap/Form';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Popover from 'react-bootstrap/Popover';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import "./DialogGeneralCategoriesData.css";
import "./DialogStyles.css";
import ColorSwath from '../components/ColorSwath';
import '../App.css'
import Table from 'react-bootstrap/Table';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlusCircle } from '@fortawesome/free-solid-svg-icons';
import { faMinusCircle } from '@fortawesome/free-solid-svg-icons';
import { faTrash } from '@fortawesome/free-solid-svg-icons';

/// props.numband
/// props.styleid 如果是新建该值为0，否则为对应id
/// props.onCancelClickCallback
/// props.onOkCallback
/// props.loginedUser
/// props.isOpen
function DialogEditStyle(props) {
    //一个渲染方案最多20个颜色

    // const emptyStyle = {type:'gray',bands:[0],
    //     nodatacolor:{val:0,r:0,g:0,b:0,a:0,lbl:"NA"},
    //     colors:[],
    //     vranges:[
    //         {minval:0,maxval:255},
    //         {minval:0,maxval:255},
    //         {minval:0,maxval:255},
    //         {minval:0,maxval:255}
    //     ]} ;
    // const [theStyleObject, setTheStyleObject] = useState(emptyStyle);

    const gradientRef = useRef();

    // 波段下拉列表
    const [bandOptions, setBandOptions] = useState([]);
    // 表格中选中行的索引值
    const [currentRowIndex, setCurrentRowIndex] = useState(-1);

    //渲染方案类型
    const [styleTypeValue, setStyleTypeValue] = useState('gray');
    //渲染方案名称
    const [styleName, setStyleName] = useState("");
    //渲染方案最小值
    const [styleMin, setStyleMin] = useState(0);
    //渲染方案最大值
    const [styleMax, setStyleMax] = useState(255);
    //无效值
    const [styleNoDataValue, setStyleNoDataValue] = useState(0);
    const [styleNoDataLabel, setStyleNoDataLabel] = useState('NoData');
    const [styleNoDataColor, setStyleNoDataColor] = useState({ r: 0, g: 0, b: 0, a: 0 });
    //渲染方案波段
    const [styleBandIndex, setStyleBandIndex] = useState(0);
    const [styleBandIndexR, setStyleBandIndexR] = useState(0);
    const [styleBandIndexG, setStyleBandIndexG] = useState(0);
    const [styleBandIndexB, setStyleBandIndexB] = useState(0);
    const [styleBandIndexA, setStyleBandIndexA] = useState(0);
    //rgb rgba 最大最小值
    const [redMin, setRedMin] = useState(0);
    const [redMax, setRedMax] = useState(0);
    const [greenMin, setGreenMin] = useState(0);
    const [greenMax, setGreenMax] = useState(0);
    const [blueMin, setBlueMin] = useState(0);
    const [blueMax, setBlueMax] = useState(0);
    const [alphaMin, setAlphaMin] = useState(0);
    const [alphaMax, setAlphaMax] = useState(0);
    // 颜色数组
    const [colorsArray, setColorsArray] = useState([]);
    // 渐变色列表显示或者隐藏
    const [gradientListPopup, setGradientListPopup] = useState(false);
    // 预定义渐变色
    const [predefinedGradientColorsArray, setPredefinedGradientColorsArray] = useState([
        [[255, 0, 0, 255], [255, 165, 0, 255], [255, 255, 0, 255], [0, 128, 0, 255], [0, 0, 255, 255], [75, 0, 130, 255], [238, 130, 238, 255]] //rainbow red->violet
        , [[238, 130, 238, 255], [75, 0, 130, 255], [0, 0, 255, 255], [0, 128, 0, 255], [255, 255, 0, 255], [255, 165, 0, 255], [255, 0, 0, 255]] //rainbow violet->red
        , [[166, 97, 26, 255], [223, 194, 125, 255], [245, 245, 245, 255], [128, 205, 193, 255], [1, 133, 113, 255]] // color brewer 0
        , [[208, 28, 139, 255], [241, 182, 218, 255], [247, 247, 247, 255], [184, 225, 134, 255], [77, 172, 38, 255]] //1
        , [[123, 50, 148, 255], [194, 165, 207, 255], [247, 247, 247, 255], [166, 219, 160, 255], [0, 136, 55, 255]] //2
        , [[230, 97, 1, 255], [253, 184, 99, 255], [247, 247, 247, 255], [178, 171, 210, 255], [94, 60, 153, 255]]
        , [[202, 0, 32, 255], [244, 165, 130, 255], [247, 247, 247, 255], [146, 197, 222, 255], [5, 113, 176, 255]]
        , [[202, 0, 32, 255], [244, 165, 130, 255], [255, 255, 255, 255], [186, 186, 186, 255], [64, 64, 64, 255]]
        , [[215, 25, 28, 255], [253, 174, 97, 255], [255, 255, 191, 255], [171, 217, 233, 255], [44, 123, 182, 255]]
        , [[215, 25, 28, 255], [253, 174, 97, 255], [255, 255, 191, 255], [166, 217, 106, 255], [26, 150, 65, 255]]
        , [[215, 25, 28, 255], [253, 174, 97, 255], [255, 255, 191, 255], [171, 221, 164, 255], [43, 131, 186, 255]]
        , [[247, 247, 247, 255], [204, 204, 204, 255], [150, 150, 150, 255], [99, 99, 99, 255], [37, 37, 37, 255]]   //white - black
        , [[37, 37, 37, 255], [99, 99, 99, 255], [150, 150, 150, 255], [204, 204, 204, 255], [247, 247, 247, 255]]   //black - white
        , [[127, 201, 127, 255], [190, 174, 212, 255], [253, 192, 134, 255], [255, 255, 153, 255], [56, 108, 176, 255]]
        , [[166, 206, 227, 255], [31, 120, 180, 255], [178, 223, 138, 255], [51, 160, 44, 255], [251, 154, 153, 255]]
    ]);
    const [currentPredefinedGradientIndex, setCurrentPredefinedGradientIndex] = useState(0);
    //自动生成颜色数量
    const [autoColorsCount, setAutoColorsCount] = useState(5);
    //上传中
    const [busying, setBusying] = useState(false);
    const [noDataColorShow, setNoDataColorShow] = useState(true);


    //初始化波段option列表
    useEffect(() => {
        let arr = [];
        for (let i = 0; i < props.numband; ++i) {
            arr.push({ key: String(i), text: String(i + 1), value: String(i) });
        }
        setBandOptions(arr);
    }, [props.numband])


    //初始化渲染方案，如果props.styleid为0表示新建，否则是编辑模式
    useEffect(() => {
        if (props.styleid <= 0) {
            //初始化对话框参数  新建
            setCurrentRowIndex(-1);
            setStyleTypeValue('gray');
            setStyleName('');
            setStyleMin(0);
            setStyleMax(255);
            setStyleNoDataValue(0);
            setStyleNoDataLabel('NoData');
            setStyleNoDataColor({ r: 0, g: 0, b: 0, a: 0 });

            setStyleBandIndex(0);
            setStyleBandIndexR(0);
            setStyleBandIndexG(0);
            setStyleBandIndexB(0);
            setStyleBandIndexA(0);
            setRedMin(0);
            setRedMax(0);
            setGreenMin(0);
            setGreenMax(0);
            setBlueMin(0);
            setBlueMax(0);
            setAlphaMin(0);
            setAlphaMax(0);
            setColorsArray([]);
            setCurrentPredefinedGradientIndex(0);
            setAutoColorsCount(5);
            setBusying(false);

        } else if (props.isOpen === true && colorsArray.length === 0) {
            //从服务器拉取 编辑模式
            setBusying(true);
            const url = global.g_serverAPIRoot + "style/detail/" + props.styleid;
            fetch(url).then(response => response.json()).then((data) => {
                const stylecontentText = data.data.styleContent;
                const styleObj = JSON.parse(stylecontentText);
                if (styleObj !== undefined) {
                    setCurrentRowIndex(-1);
                    setStyleTypeValue(styleObj.type);
                    setStyleName(data.data.description);
                    setStyleMin(0);
                    setStyleMax(255);
                    setStyleNoDataValue(styleObj.nodatacolor.val);
                    setStyleNoDataLabel(styleObj.nodatacolor.lbl);
                    setStyleNoDataColor( styleObj.nodatacolor);
                    setColorsArray([]);
                    if (styleObj.type === "gray" || styleObj.type === "linear" || styleObj.type === "discrete" || styleObj.type === "exact") {
                        setStyleBandIndex(styleObj.bands[0]);

                        if (styleObj.type === "linear" || styleObj.type === "discrete" || styleObj.type === "exact") {
                            //重设颜色列表
                            setColorsArray(styleObj.colors);
                        }
                    } else if (styleObj.type === "rgb" || styleObj.type === "rgba") {
                        setStyleBandIndexR(styleObj.bands[0]);
                        setStyleBandIndexG(styleObj.bands[1]);
                        setStyleBandIndexB(styleObj.bands[2]);

                        setRedMin(styleObj.vranges[0].minval);
                        setRedMax(styleObj.vranges[0].maxval);
                        setGreenMin(styleObj.vranges[1].minval);
                        setGreenMax(styleObj.vranges[1].maxval);
                        setBlueMin(styleObj.vranges[2].minval);
                        setBlueMax(styleObj.vranges[2].maxval);

                        if (styleObj.type === "rgba") {
                            setStyleBandIndexA(styleObj.bands[3]);

                            setAlphaMin(styleObj.vranges[3].minval);
                            setAlphaMax(styleObj.vranges[3].maxval);
                        }

                    }
                    setCurrentPredefinedGradientIndex(0);
                    setAutoColorsCount(5);
                    setBusying(false);
                }
            });



        }
    }, [props.styleid, props.isOpen]);




    //添加一个颜色
    const onAddColorClickCallback = function () {
        let color1 = { r: 0, g: 0, b: 0, a: 1.0, val: 0, lbl: '' };
        if (colorsArray.length < 20) {
            setColorsArray([...colorsArray, color1]);
        }
    }



    //删除一个颜色
    const onRemoveColorClickCallback = function () {
        if (currentRowIndex >= 0 && currentRowIndex < colorsArray.length) {
            let newcolors = [...colorsArray];
            newcolors.splice(currentRowIndex, 1);
            setColorsArray(newcolors);
        }
    }



    //清空颜色
    const onClearColorsArrayClickCallback = function () {
        setColorsArray([]);
    }



    //自动生成颜色
    const onAutoGenerateColorsClickCallback = function () {
        const colors1 = predefinedGradientColorsArray[0];
        if (colors1.length === 0) return;//无效值颜色数组
        let count1 = parseInt(autoColorsCount);
        if (count1 <= 0) return;//无效数量

        if (count1 > 20) count1 = 20;
        //结果颜色数组
        let resColors = [];
        if (count1 === 1) {
            resColors.push({ r: colors1[0][0], g: colors1[0][1], b: colors1[0][2], a: colors1[0][3], val: styleMin, lbl: styleMin.toString() });
        }
        else if (count1 === 2) {
            const ii = colors1.length - 1;
            resColors.push({ r: colors1[0][0], g: colors1[0][1], b: colors1[0][2], a: colors1[0][3], val: styleMin, lbl: styleMin.toString() });
            resColors.push({ r: colors1[ii][0], g: colors1[ii][1], b: colors1[ii][2], a: colors1[ii][3], val: styleMax, lbl: styleMax.toString() });
        }
        else {
            const valstep = (styleMax - styleMin) / (count1 - 1);
            const colorstep = 1.0 / (count1 - 1);
            const colorsLen = colors1.length;
            resColors.push({ r: colors1[0][0], g: colors1[0][1], b: colors1[0][2], a: colors1[0][3], val: styleMin, lbl: styleMin.toString() }); //第一个颜色

            for (let i = 1; i < count1 - 1; ++i) {
                const percent = i * colorstep;
                const icolor0 = parseInt(i * colorstep * (colorsLen - 1));
                const icolor1 = icolor0 + 1;
                const clr0 = colors1[icolor0];
                const clr1 = colors1[icolor1];
                const weight0 = icolor1 - percent * (colorsLen - 1);
                const weight1 = 1.0 - weight0;
                let tcolor = {};
                tcolor.r = parseInt(weight0 * clr0[0] + weight1 * clr1[0]);
                tcolor.g = parseInt(weight0 * clr0[1] + weight1 * clr1[1]);
                tcolor.b = parseInt(weight0 * clr0[2] + weight1 * clr1[2]);

                tcolor.a = parseInt(weight0 * clr0[3] + weight1 * clr1[3]);

                tcolor.val = i * valstep;
                tcolor.lbl = tcolor.val.toFixed(2).toString();
                resColors.push(tcolor);
            }
            const ii = colors1.length - 1;
            resColors.push({ r: colors1[ii][0], g: colors1[ii][1], b: colors1[ii][2], a: colors1[ii][3], val: styleMax, lbl: styleMax.toString() }); //最后一个颜色
        }
        setColorsArray(resColors);
    }


    //从当前对话框参数生成渲染方案对象
    const generateStyleObjectFromDialogParams = function () {
        let tempStyleObj = {};
        tempStyleObj.type = styleTypeValue;
        tempStyleObj.bands = [0];
        tempStyleObj.nodatacolor = {};
        tempStyleObj.nodatacolor.val = parseInt(styleNoDataValue);
        tempStyleObj.nodatacolor.r = parseInt(styleNoDataColor.r);
        tempStyleObj.nodatacolor.g = parseInt(styleNoDataColor.g);
        tempStyleObj.nodatacolor.b = parseInt(styleNoDataColor.b);
        tempStyleObj.nodatacolor.a = parseInt(styleNoDataColor.a);
        tempStyleObj.nodatacolor.lbl = styleNoDataLabel;

        if (styleTypeValue === 'gray') {
            tempStyleObj.bands = [parseInt(styleBandIndex)];
            tempStyleObj.colors = [];
            tempStyleObj.vranges = [{ minval: parseFloat(styleMin), maxval: parseFloat(styleMax) }];
        } else if (styleTypeValue === "rgb") {
            tempStyleObj.bands = [parseInt(styleBandIndexR), parseInt(styleBandIndexG), parseInt(styleBandIndexB)];
            tempStyleObj.colors = [];
            tempStyleObj.vranges = [
                { minval: parseFloat(redMin), maxval: parseFloat(redMax) },
                { minval: parseFloat(greenMin), maxval: parseFloat(greenMax) },
                { minval: parseFloat(blueMin), maxval: parseFloat(blueMax) }
            ];
        } else if (styleTypeValue === "rgba") {
            tempStyleObj.bands = [parseInt(styleBandIndexR), parseInt(styleBandIndexG), parseInt(styleBandIndexB), parseInt(styleBandIndexA)];
            tempStyleObj.colors = [];
            tempStyleObj.vranges = [
                { minval: parseFloat(redMin), maxval: parseFloat(redMax) },
                { minval: parseFloat(greenMin), maxval: parseFloat(greenMax) },
                { minval: parseFloat(blueMin), maxval: parseFloat(blueMax) },
                { minval: parseFloat(alphaMin), maxval: parseFloat(alphaMax) }
            ];
        } else if (styleTypeValue === "linear" || styleTypeValue === "discrete" || styleTypeValue === "exact") {
            tempStyleObj.bands = [parseInt(styleBandIndex)];
            tempStyleObj.vranges = [];
            tempStyleObj.colors = [...colorsArray];
            for (let i = 0; i < tempStyleObj.colors.length; ++i) {
                tempStyleObj.colors[i].val = parseFloat(tempStyleObj.colors[i].val);
            }
        } else {
            tempStyleObj.vranges = [];
            tempStyleObj.colors = [];
        }
        return tempStyleObj;
    }


    // 导出渲染方案
    const onExportStyleClickedCallback = function () {
        const styleobj = generateStyleObjectFromDialogParams();
        const textFile = new Blob([JSON.stringify(styleobj)], { type: 'application/json' }); //pass data from localStorage API to blob
        const element = document.createElement("a");
        element.href = URL.createObjectURL(textFile);
        element.download = "style.json";
        document.body.appendChild(element);
        element.click();
        element.remove();
    }


    // 确定按钮
    const onOkButtonClickedCallback = async function () {
        const currentUserId = props.loginedUser.uid;
        if (currentUserId <= 0) return;
        const styleobj = generateStyleObjectFromDialogParams();
        const styleJsonString = JSON.stringify(styleobj);

        let formData = new FormData();

        formData.append('stylecontent', styleJsonString);
        formData.append('description', styleName);
        let url = global.g_serverAPIRoot + "style/new";
        if (props.styleid > 0) {
            //修改
            url = global.g_serverAPIRoot + "style/edit";
            formData.append('styleid', props.styleid);
        } else {
            //新建
            url = global.g_serverAPIRoot + "style/new";
            formData.append('userid', currentUserId);
        }


        const requestOptions = {
            method: 'POST',
            headers: { 'Accept': 'application/json' },
            body: formData
        };
        setBusying(true);
        let response = await fetch(url, requestOptions);
        let data = await response.text();
        setBusying(false);
        setColorsArray([]);
        //关闭对话框，回到父级对话框
        props.onOkCallback();
    }

    // 颜色列表设置值
    const onColorsArrayValueChangedCallback = function (index1, val) {
        let newColorArr = [...colorsArray];
        newColorArr[index1].val = val;
        setColorsArray(newColorArr);
    }

    // 颜色列表设置标签
    const onColorsArrayLabelChangedCallback = function (index1, lbl) {
        let newColorArr = [...colorsArray];
        newColorArr[index1].lbl = lbl;
        setColorsArray(newColorArr);
    }

    // 颜色列表设置颜色
    const onWColorPickerColorChangedCallback = function (index1, newPickerColor) {
        let newColorArr = [...colorsArray];
        newColorArr[index1].r = newPickerColor.r;
        newColorArr[index1].g = newPickerColor.g;
        newColorArr[index1].b = newPickerColor.b;
        newColorArr[index1].a = newPickerColor.a;
        setColorsArray(newColorArr);
    }

    //onCancel
    const onCancel = function () {
        setColorsArray([]);
        props.onCancelClickCallback();
    }


    const onNoDataColorChanged = function (colors) {
        setStyleNoDataColor(colors) ;
    }

    const onCloseColorPicker = function () {
        setNoDataColorShow(false);
    }



    return (
        <Modal
            size="lg"
            show={props.isOpen}
            dialogClassName="rsbig-modal"
            contentClassName="rsbig-modal-content"
        >
            <div><span className='DialogGeneralCategoriesDataTitleSlash'></span>{props.dialogTitle}</div>
            <div className="DialogEditStyleContentContainer" style={{ margin: '4px' }}>

                {/* row 1 名称 与 类型 */}
                <Table borderless size="sm" style={{marginBottom:'8px'}} >
                    <tr style={{ border: '0px' }}>
                        <td>
                            名称:
                        </td>
                        <td>
                            <Form.Control style={{ border: '1px solid #ccc', width: '176px' }}
                                size="sm"
                                placeholder='渲染方案名称'
                                value={styleName}
                                onChange={(e) => setStyleName(e.target.value)}
                            />
                        </td>
                        <td style={{ textAlign: 'right' }}>
                            类型:
                        </td>
                        <td style={{ textAlign: 'left' }}>

                            <select
                                style={{
                                    borderWidth: '0px',
                                    borderBottom: '1px solid #888',
                                    width: '176px',
                                }}
                                onChange={(e) => setStyleTypeValue(e.target.value)}
                                value={styleTypeValue}
                            >
                                <option value='gray'>灰度</option>
                                <option value='rgb'>RGB</option>
                                <option value='rgba'>RGBA</option>
                                <option value='linear'>线性连续</option>
                                <option value='discrete'>离散分段</option>
                                <option value='exact'>单值颜色</option>
                            </select>

                        </td>
                    </tr>

                    <tr style={{ border: '0px' }}><td style={{ height: '8px' }}></td></tr>

                    {/* row 2 选择波段 选择渐变色 */}
                    {
                        (styleTypeValue === 'gray' || styleTypeValue === 'linear' || styleTypeValue === 'discrete' || styleTypeValue === 'exact') ?
                            (
                                <>
                                    <tr style={{ border: '0px' }}>
                                        <td>
                                            波段:
                                        </td>
                                        <td style={{ textAlign: 'left' }}>
                                            <select
                                                style={{
                                                    borderWidth: '0px',
                                                    borderBottom: '1px solid #888',
                                                    width: '176px',
                                                }}
                                                value={styleBandIndex}
                                                onChange={(e) => setStyleBandIndex(e.target.value)}
                                            >
                                                {bandOptions.map(item => <option value={item.value}>{item.text}</option>)}
                                            </select>
                                        </td>
                                        <td>
                                        </td>
                                        <td>
                                        </td>
                                    </tr>
                                    <tr style={{ border: '0px' }}><td style={{ height: '8px' }}></td></tr>
                                </>
                            ) :
                            ("")
                    }



                    {/* row 3 最小值和最大值 */}
                    {
                        (styleTypeValue === 'linear' || styleTypeValue === 'discrete' || styleTypeValue === 'exact' || styleTypeValue === "gray") ?
                            (<>
                                <tr style={{ border: '0px' }}>
                                    <td>最小值:</td>
                                    <td>
                                        <Form.Control
                                            style={{ border: '1px solid #ccc', width: '176px' }}
                                            size="sm"
                                            placeholder='最小值' type='number'
                                            value={styleMin}
                                            onChange={(e) => setStyleMin(e.target.value)}
                                        />
                                    </td>
                                    <td>最大值</td>
                                    <td>
                                        <Form.Control
                                            style={{ border: '1px solid #ccc', width: '176px' }}
                                            size="sm"
                                            placeholder='最大值' type='number'
                                            value={styleMax}
                                            onChange={(e) => setStyleMax(e.target.value)}
                                        />
                                    </td>
                                </tr>
                                <tr style={{ border: '0px' }}><td style={{ height: '8px' }}></td></tr>
                            </>
                            ) :
                            ("")

                    }



                </Table>



                {/* row 4 RGB / RGBA 设置控件 */}
                <Table size="sm" style={{margin:'0px'}}>
                    {
                        (styleTypeValue === "rgb" || styleTypeValue === "rgba") ?
                            (
                                <>
                                    <tr style={{ border: '0px' }}>
                                        <td style={{ width: "64px" }}>
                                            红波段:
                                        </td>
                                        <td>
                                            <select
                                                style={{
                                                    width: "120px",
                                                    borderWidth: '0px', borderBottom: '1px solid #888'
                                                }}
                                                value={styleBandIndexR}
                                                onChange={(e) => setStyleBandIndexR(e.target.value)}
                                            >{bandOptions.map(item => <option value={item.value}>{item.text}</option>)}
                                            </select>
                                        </td>
                                        <td>
                                            最小值:
                                        </td>
                                        <td>
                                            <Form.Control
                                                style={{ border: '1px solid #ccc', width: '120px' }}
                                                placeholder='最小值'
                                                type='number'
                                                size="sm"
                                                value={redMin}
                                                onChange={(e) => setRedMin(e.target.value)}
                                            />
                                        </td>
                                        <td>
                                            最大值:
                                        </td>
                                        <td>
                                            <Form.Control
                                                style={{ border: '1px solid #ccc', width: '120px' }}
                                                placeholder='最大值'
                                                type='number'
                                                size="sm"
                                                value={redMax}
                                                onChange={(e) => setRedMax(e.target.value)}
                                            />
                                        </td>
                                    </tr>
                                    <tr style={{ border: '0px' }}><td style={{ height: '8px' }}></td></tr>
                                    <tr style={{ border: '0px' }}>
                                        <td style={{ width: "64px" }}>
                                            绿波段:
                                        </td>
                                        <td>
                                            <select
                                                style={{
                                                    width: "120px",
                                                    borderWidth: '0px',
                                                    borderBottom: '1px solid #888'
                                                }}
                                                value={styleBandIndexG}
                                                onChange={(e) => setStyleBandIndexG(e.target.value)}
                                            >
                                                {bandOptions.map(item => <option value={item.value}>{item.text}</option>)}
                                            </select>
                                        </td>
                                        <td>
                                            最小值:
                                        </td>
                                        <td>
                                            <Form.Control
                                                style={{ border: '1px solid #ccc', width: '120px' }}
                                                placeholder='最小值' type='number'
                                                value={greenMin}
                                                onChange={(e) => setGreenMin(e.target.value)}
                                            />
                                        </td>
                                        <td>
                                            最大值:
                                        </td>
                                        <td>
                                            <Form.Control
                                                style={{ border: '1px solid #ccc', width: '120px' }}
                                                placeholder='最大值' type='number'
                                                value={greenMax}
                                                onChange={(e) => setGreenMax(e.target.value)}
                                            />
                                        </td>
                                    </tr>
                                    <tr style={{ border: '0px' }}><td style={{ height: '8px' }}></td></tr>
                                    <tr style={{ border: '0px' }}>
                                        <td style={{ width: "64px" }}>
                                            蓝波段:
                                        </td>
                                        <td>
                                            <select
                                                style={{
                                                    width: "120px",
                                                    borderWidth: '0px',
                                                    borderBottom: '1px solid #888'
                                                }}
                                                value={styleBandIndexB}
                                                onChange={(e) => setStyleBandIndexB(e.target.value)}
                                            >
                                                {bandOptions.map(item => <option value={item.value}>{item.text}</option>)}
                                            </select>
                                        </td>
                                        <td>
                                            最小值:
                                        </td>
                                        <td>
                                            <Form.Control
                                                style={{ border: '1px solid #ccc', width: '120px' }}
                                                placeholder='最小值' type='number'
                                                value={blueMin}
                                                onChange={(e) => setBlueMin(e.target.value)}
                                            />
                                        </td>
                                        <td>
                                            最大值:
                                        </td>
                                        <td>
                                            <Form.Control
                                                style={{ border: '1px solid #ccc', width: '120px' }}
                                                placeholder='最大值' type='number'
                                                size="sm"
                                                value={blueMax}
                                                onChange={(e) => setBlueMax(e.target.value)}
                                            />
                                        </td>
                                    </tr>
                                    <tr style={{ border: '0px' }}><td style={{ height: '8px' }}></td></tr>
                                </>
                            )
                            :
                            (
                                ""
                            )
                    }

                    {
                        (styleTypeValue === "rgba") ?
                            (
                                <tr style={{ border: '0px' }}>
                                    <td style={{ width: "64px" }}>
                                        A波段:
                                    </td>
                                    <td>
                                        <select
                                            style={{
                                                width: "120px",
                                                borderWidth: '0px',
                                                borderBottom: '1px solid #888'
                                            }}
                                            value={styleBandIndexA}
                                            onChange={(e) => setStyleBandIndexA(e.target.value)}
                                        >
                                            {bandOptions.map(item => <option value={item.value}>{item.text}</option>)}
                                        </select>
                                    </td>
                                    <td>
                                        最小值:
                                    </td>
                                    <td>
                                        <Form.Control
                                            style={{ border: '1px solid #ccc', width: '120px' }}
                                            placeholder='最小值' type='number'
                                            value={alphaMin}
                                            onChange={(e) => setAlphaMin(e.target.value)}
                                        />
                                    </td>
                                    <td>
                                        最大值:
                                    </td>
                                    <td>
                                        <Form.Control
                                            style={{ border: '1px solid #ccc', width: '120px' }}
                                            placeholder='最大值' type='number'
                                            size="sm"
                                            value={alphaMax}
                                            onChange={(e) => setAlphaMax(e.target.value)}
                                        />
                                    </td>
                                </tr>
                            )
                            :
                            ("")
                    }
                </Table> 
                


                {/* row 4 渐变色表格 */}
                {
                    (styleTypeValue === 'linear' || styleTypeValue === 'discrete' || styleTypeValue === 'exact') ?
                        (
                            <>
                                <div class="DialogEditStyleContentContainerRow" 
                                style={{
                                    height: '180px', 
                                    backgroundColor: 'white', 
                                    overflow: 'auto',
                                    border:'1px solid #ccc'}}>
                                    <Table striped bordered hover>
                                        <thead>
                                            <tr>
                                                <th style={{padding:'1px',width: '60px',fontSize:'14px' }}>序号</th>
                                                <th style={{padding:'1px',width: '100px',fontSize:'14px' }}>颜色</th>
                                                <th style={{padding:'1px',width: '150px',fontSize:'14px' }}>值</th>
                                                <th style={{padding:'1px',width: '240px',fontSize:'14px' }}>标签</th>
                                            </tr>
                                        </thead>
                                        {
                                            colorsArray.map((item, index) => {
                                                return (
                                                    <tr className=
                                                        {
                                                            (index === currentRowIndex) ?
                                                                "DialogEditRowSelected" : "DialogEditRow"
                                                        }
                                                        onClick={() => {
                                                            setCurrentRowIndex(index+1);
                                                        }}>
                                                        <td>{index+1}</td>
                                                        <td>
                                                            <ColorSwath color={item} onChange={(clr)=>onWColorPickerColorChangedCallback(index,clr)} />
                                                        </td>
                                                        <td><Form.Control style={{ height: '28px' }} value={item.val} type='number'
                                                            onChange={(e) => onColorsArrayValueChangedCallback(index, e.target.value)}
                                                        /></td>
                                                        <td><Form.Control style={{ height: '28px' }} value={item.lbl} type='text'
                                                            onChange={(e) => onColorsArrayLabelChangedCallback(index, e.target.value)}
                                                        /></td>
                                                    </tr>
                                                )
                                            })
                                        }
                                    </Table>
                                </div>

                                {/* 渐变色表格工具栏 row 5 */}
                                <div style={{ backgroundColor: 'white' ,padding: '1px' }} >
                                    <FontAwesomeIcon icon={faPlusCircle} color='rgb(13,110,253' style={{cursor:'pointer',marginRight:'8px',fontSize:'22px'}} onClick={onAddColorClickCallback}/>
                                    <FontAwesomeIcon icon={faMinusCircle} color='rgb(13,110,253' style={{cursor:'pointer',marginRight:'8px',fontSize:'22px'}} onClick={onRemoveColorClickCallback}/>
                                    <FontAwesomeIcon icon={faTrash} color='rgb(220, 53, 69)'  style={{cursor:'pointer',fontSize:'22px'}} onClick={onClearColorsArrayClickCallback}/>

                                    <Button 
                                    style={{ float: 'right' }}  
                                    size='sm' 
                                    onClick={onAutoGenerateColorsClickCallback}>自动生成</Button>
                                    <Form.Control
                                    style={{ marginRight: '4px', 
                                    width: '80px', float: 'right' }}
                                    size='sm'
                                    type='number' value={autoColorsCount}
                                    onChange={(e) => setAutoColorsCount(e.target.value)}
                                    />
                                    <label style={{ float: 'right', lineHeight: '20px', marginRight: '4px' }}>数量：</label>

                                    <div style={{ clear: 'both' }} ></div>
                                </div>
                            </>
                        )
                        :
                        ("")
                }





                {/* row 6 无效值设置 */}
                <Table borderless size='sm'>
                    <tr style={{ border: '0px' }}>
                        <td>
                            无效值:
                        </td>
                        <td>
                            <Form.Control style={{ border: '1px solid #ccc', width: '120px' }}
                                placeholder='无效值'
                                type='number'
                                size='sm'
                                value={styleNoDataValue}
                                onChange={(e) => setStyleNoDataValue(e.target.value)}
                            />
                        </td>
                        <td>
                            无效色:
                        </td>
                        <td>
                            <ColorSwath color={styleNoDataColor} onChange={onNoDataColorChanged} />
                        </td>
                        <td>无效值标签:</td>
                        <td>
                            <Form.Control
                                style={{ border: '1px solid #ccc', width: '120px' }}
                                placeholder='标签'
                                size='sm'
                                type='text'
                                value={styleNoDataLabel}
                                onChange={(e) => setStyleNoDataLabel(e.target.value)}
                            />
                        </td>
                    </tr>
                </Table>

            </div>

            <div className="DialogGeneralCategoriesDataFooter">
                <Button className='rsbig-button' style={{ float: 'left' }}
                    variant="secondary"
                    size="sm" >帮助</Button>
                <Button className='rsbig-button' style={{ float: 'right' }}
                    variant="secondary"
                    size="sm"
                    onClick={onCancel} >取消</Button>
                <Button className='rsbig-button'
                    style={{ backgroundColor: 'rgb(53, 151, 209)', float: 'right', marginRight: '10px' }} compact={true} primary={true} onClick={onOkButtonClickedCallback}
                    loading={busying}
                    variant="primary"
                    size="sm"
                >确定</Button>
                <div style={{ clear: 'both' }}></div>
            </div>
        </Modal>
    )
}

export default DialogEditStyle
